<template>
  <div class="container">
        <mt-header title="用户登录">用户登录</mt-header>
        <div class="img-box">
                <img width="100%" height="100%" src="../../static/1.jpg" alt="">
        </div>
        <div class="middle">
            <div class="user-info-box">
                <mt-cell title="用户">
                    <input type="text" v-model="userInfo.phone">
                    <img slot="icon" src="../../static/img/admin.png" width="24" height="24">
                    <i @click="clearText('phone')" v-if="userInfo.phone.length > 0"  class="clear-img mintui mintui-field-error"></i>
                </mt-cell>
                <mt-cell title="密码">
                    <input type="password"  v-model="userInfo.pass">
                    <img slot="icon" src="../../static/img/close-eye.png" width="24" height="24">
                    <i @click="clearText('pass')" v-if="userInfo.pass.length > 0"  class="clear-img mintui mintui-field-error"></i>
                </mt-cell>
            </div>
            <div class="user-btn">
                <mt-button type="primary" @click="singIn">登录</mt-button>
                <mt-button class="default" @click="$router.push('/register')" type="default">注册</mt-button>
            </div>
            <div class="recover">
                <mt-cell
                    title="忘记密码"
                    to="//github.com"
                >
                    <img slot="icon" src="../../static/img/like-1.png" width="24" height="24">
                </mt-cell>
            </div>
        </div>
  </div>
</template>

<script>
import { MessageBox,Toast } from 'mint-ui';
export default {
    data(){
        return {
            userInfo:{
                phone:'',
                pass:''
            }
        }
    },
    methods:{
        singIn(){
            let { phone,pass } = this.userInfo
            if ( !phone  ){
                MessageBox('', '请输入手机号');
                return
            }
            if ( !pass  ){
                MessageBox('', '请输入密码');   
                return
            }
            if ( !/^1[0-9]{10}$/.test(phone) ){
                MessageBox('', '请输入正确的手机号');
                return
            }
            if ( pass.length > 12  ){
                MessageBox('', '密码长度不能超过12'); 
                return
            }
            Toast('登录成功')
            this.$router.push('/home')

        },
        clearText(key){
            this.userInfo[key] = ''
        }
    }
}
</script>

<style scoped>
.container{
    position: relative;
    height: 100vh;
    background: rgba(241, 241, 241, 0.945);
}
.mint-header >>> .mint-header-title{
    font-size: 20px;
}
.img-box{
    position: absolute;
    top: 10vh;
    left: 40vw;
    width: 20vw;
    height: 10vh;
}
.img-box img{
    border-radius: 50%;
}
.middle{
    margin: 0px 15px;
    margin-top: 20vh;

}
.user-info-box{
    margin-bottom: 2vh;
}
.user-info-box >>> .mint-cell-title{
    display: flex;
    justify-content: space-around;
}
.user-info-box >>> .mint-cell-wrapper{
    background: white;
}
input{
    border: 1px solid white;
}
.user-btn >>> .mint-button{
    width: 100%;
    margin-bottom: 2vh;
}
.default{
    border: 1px solid #666;
}

.recover >>> .mint-cell-title{
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
}
.mint-cell{
    background: none;
}
</style>